﻿<tpl var layoutStyle={ />
<link rel="stylesheet/less" type="text/css" href="/assets/css/manage/portform/socket.less" />
<script src="//cdn.bootcss.com/less.js/3.0.1/less.min.js"></script>
<tpl }; />

<tpl var layoutBody={ />
<div data-identity="platform:socket" data-table="platform_socket">
	<div class="layui-breadcrumb">
		<a href="/manage/index.jspx">首页</a>
		<a href="javascript:;">
			<cite>WebSocket</cite>
		</a>
	</div>
	<hr>
	<div class="layui-card">
		<div class="layui-card-header">卡片面板</div>
		<div class="layui-card-body message-body">
			<div class="message-scroll">
				<div class="message-list"></div>
			</div>
			<hr>
			<div class="message-form">
				<input type="text" placeholder="请输入消息内容">
				<button class="layui-btn" disabled>立即发送</button>
			</div>
		</div>
	</div>
</div>
<tpl }; />

<tpl var layoutScript={ />
<script type="text/javascript">
	layui.config({
		base: '${webCdn}/plugins/layui/modules/'
	}).extend({
		message: 'message/message.min',
	}).use(['element', 'laytpl', 'message'], function () {
		var _websocket = new WebSocket("ws://localhost:8080/socket?SESSIONID=${sessionid!}");

		// 绑定连接监听事件
		_websocket.addEventListener('open', (e) => {
			console.log("Connection open ...");
		});
		_websocket.addEventListener('close', (e) => {
			console.log("Connection closed.");
			console.log(e);
		});
		_websocket.addEventListener("error", function (event) {
			console.error(event);
		});
		_websocket.addEventListener("message", (event) => {
			console.log("Received Message: " + event.data);
		});

		// 绑定连接逻辑处理事件
		_websocket.addEventListener('open', (e) => {
			layui.message.success('连接成功', () => $('.message-form button').removeAttr('disabled'));
		});
		_websocket.addEventListener('close', (e) => {
			layui.message.failure('连接断开', () => $('.message-form button').attr('disabled', true));
		});
		_websocket.addEventListener("message", (event) => {
			layui.laytpl($('#message-item-tpl').html()).render(JSON.parse(event.data), function (html) {
				$('.message-scroll').scrollTop($('.message-scroll .message-list').append(html).outerHeight());
			});
		});

		// 绑定表单提交事件
		$('.message-form button').on('click', function () {
			var payload = {
				"content": $('.message-form input').val(),
				"avatar": "${session.SESSION_AVATAR!}",
				"name": "${session.SESSION_NAME!}",
				"uuid": "${session.SESSION_UUID!}",
			};

			if (_websocket.readyState != WebSocket.OPEN) {
				layui.message.failure('连接未建立');
			} else if (payload.content === '') {
				layui.message.failure('未输入内容');
			} else {
				_websocket.send(JSON.stringify(payload));
			}
		});
	});
</script>
<script type="text/html" id="message-item-tpl">
	<div class="message-item {{d.self?'self':''}}">
		<div class="message-item-info">
			{{# if(d.avatar && d.avatar.indexOf('http') != 0){ }}
			<img class="message-item-icon" src="/down/thumb/{{d.avatar}}">
			{{# } else { }}
			<img class="message-item-icon" src="{{d.avatar}}">
			{{# } }}
			<div class="message-item-name">{{d.name}}</div>
			<div class="message-item-sentime">{{d.createTime}}</div>
		</div>
		<div class="message-item-content">{{d.content}}</div>
	</div>
</script>
<tpl }; />
<tpl include( "../../tpl/layout.html" ,{identity:"platform:socket",layoutStyle:layoutStyle,layoutBody:layoutBody,layoutScript:layoutScript}){} />